<template>
  <div style="padding: 20px 150px; background-color: #f3f7fa;">
    <Breadcrumb />

    <Map @getCityCode="setCityCode($event)" style="padding: 20px 20px" />

    <el-divider><i class="el-icon-more-outline"></i></el-divider>

    <Hotel v-if="flag" :citycode="citycode" :city="city" style="padding: 20px 20px" />

    <!-- 滑到顶部 -->
    <el-backtop></el-backtop>
  </div>
</template>

<script>
import Map from "@/components/hotel/map";
import Hotel from "@/components/hotel/hotel";
import Breadcrumb from "@/components/hotel/breadcrumb";

export default {
  components: {
    Map,
    Hotel,
    Breadcrumb
  },
  data() {
    return {
      citycode: null,
      city: null,
      flag: false,
    };
  },
  methods: {
    setCityCode(data) {
      console.log("cityCode = " + data);
      this.citycode = data.citycode;
      this.city = data.city;
      this.flag = true;
    }
  },
  mounted() {
  }
};
</script>

<style lang="less"></style>
